<template>
	<div class="app-container">
		<el-card class="box-card">
			<h3>商品编辑</h3>
			<el-form ref="dataForm" :rules="rules" :model="goods" label-width="150px">
				<el-form-item label="商品名称" prop="goodsName">
					<el-input v-model="goods.goodsName"/>
				</el-form-item>
				<el-form-item label="品牌名称" prop="brandName">
					<el-input v-model="goods.brandName"/>
				</el-form-item>
				<el-form-item label="单价" prop="price">
					<el-input v-model="goods.price">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>
				<el-form-item label="保证金" prop="depositRatio">
					<el-input v-model="goods.depositRatio">
						<template slot="append">%</template>
					</el-input>
				</el-form-item>
				
				<el-form-item label="剩余库存" prop="stock">
					<el-input v-model="goods.stock"/>
				</el-form-item>
				
				<el-form-item label="配送方式" prop="deliver">
					<el-radio-group v-model="goods.deliver">
						<el-radio :label="1">整车配送</el-radio>
						<el-radio :label="0">物流配送</el-radio>
					</el-radio-group>
				</el-form-item>
				
				<el-form-item label="配送费" prop="deliverMoney">
					<el-input v-model="goods.deliverMoney">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>
				
				<el-form-item label="商品图片">
					<el-upload :action="uploadPath" :limit="5" :file-list="goodsPicList" :on-exceed="uploadOverrun"
					           :on-success="handleimgsUrl" :on-remove="handleRemove" multiple
					           accept=".jpg, .jpeg, .png, .gif" list-type="picture-card">
						<i class="el-icon-plus"/>
					</el-upload>
				</el-form-item>
				
				<el-form-item label="商品规格" prop="specification">
					<el-input v-model="goods.specification"/>
				</el-form-item>
				
				<el-form-item label="所属类目" prop="category">
					<el-cascader :options="categoryList" expand-trigger="hover" @change="handleCategoryChange"/>
				</el-form-item>
				
				<el-form-item label="商品描述" prop="description">
					<el-input v-model="goods.description"/>
				</el-form-item>
				
				<el-form-item label="生产商" prop="producer">
					<el-input v-model="goods.producer"/>
				</el-form-item>
				
				<el-form-item label="生产地" prop="origin">
					<el-input v-model="goods.origin"/>
				</el-form-item>
				<el-form-item label="存放地" prop="storage">
					<el-input v-model="goods.storage"/>
				</el-form-item>
				
				<el-form-item label="出厂日期" prop="factoryTime">
					<el-date-picker type="date" placeholder="选择日期" v-model="goods.factoryTime"></el-date-picker>
				</el-form-item>
				
				<el-form-item label="截止日期" prop="endTime">
					<el-date-picker type="date" placeholder="选择日期" v-model="goods.endTime"></el-date-picker>
				</el-form-item>
				
				<el-form-item label="技术标准" prop="technicalStandard">
					<el-input v-model="goods.technicalStandard"/>
				</el-form-item>
				
				<el-form-item label="质量等级" prop="qualityLevel">
					<el-radio-group v-model="goods.qualityLevel">
						<el-radio :label="0">优等</el-radio>
						<el-radio :label="1">合格</el-radio>
						<el-radio :label="2">等外</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="包装方式" prop="packing">
					<el-radio-group v-model="goods.packing">
						<el-radio :label="0">25kg/袋</el-radio>
						<el-radio :label="1">1吨/袋</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
		</el-card>
		
		<div class="op-container">
			<el-button @click="handleCancel">取消</el-button>
			<el-button v-if="!goods.id" type="primary" @click="handleEdit">添加商品</el-button>
			<el-button v-if="goods.id" type="primary" @click="handleEdit">更新商品</el-button>
		</div>
	</div>
</template>


<script>
	import {editGoods, createGoods} from '@/api/goods'
	import {categoryTree} from '@/api/category'
	import {uploadPath} from '@/api/storage'
	import Editor from '@tinymce/tinymce-vue'
	import {
		mapState
	} from 'vuex'
	
	export default {
		name: 'GoodsUpsert',
		components: {Editor},
		data() {
			return {
				uploadPath,
				goodsPicList: undefined,
				categoryList: undefined,
				goods: undefined,
				rules: {
					category3Id: [
						{required: true, message: '请选择商品类目', trigger: 'blur'}
					],
					goodsName: [
						{required: true, message: '商品名称不能为空', trigger: 'blur'}
					],
					brandName: [
						{required: true, message: '品牌名称不能为空', trigger: 'blur'}
					],
					price: [
						{required: true, message: '商品单价不能为空', trigger: 'blur'}
					],
					depositRatio: [
						{required: true, message: '保证金比例不能为空', trigger: 'blur'}
					],
					deliver: [
						{required: true, message: '配送方式不能为空', trigger: 'blur'}
					],
					stock: [
						{required: true, message: '库存不能为空', trigger: 'blur'}
					],
					specification: [
						{required: true, message: '商品规格不能为空', trigger: 'blur'}
					],
					description: [
						{required: true, message: '商品描述不能为空', trigger: 'blur'}
					],
					technicalStandard: [
						{required: true, message: '技术标准不能为空', trigger: 'blur'}
					],
					qualityLevel: [
						{required: true, message: '质量等级不能为空', trigger: 'blur'}
					],
					packing: [
						{required: true, message: '包装方式不能为空', trigger: 'blur'}
					],
				}
			}
		},
		created() {
			this.init()
		},
		computed: {
			...mapState(['data'])
		},
		methods: {
			init: function () {
				const goodsId = this.$route.query.id
				if (goodsId) {
					this.goods = this.data.detail
					this.goodsPicList = []
					this.goods.goodsPicList.forEach(item => {
						this.goodsPicList.push({
							url: item
						})
					})
					this.goods.deliver = parseInt(this.goods.deliver)
					this.goods.qualityLevel = parseInt(this.goods.qualityLevel)
					this.goods.packing = parseInt(this.goods.packing)
					console.log(this.goods)
					
				}
				categoryTree().then(res => {
					res.data.forEach(item => {
						let obj1 = {
							value: item.id,
							label: item.name,
							children: []
						}
						if (item.twoList.length > 0) {
							item.twoList.forEach(twoList => {
								let obj2 = {
									value: item.id + ',' + twoList.id,
									label: twoList.name,
									children: []
								}
								if (twoList.threeList.length > 0) {
									twoList.threeList.forEach(threeList => {
										let obj3 = {
											value: item.id + ',' + twoList.id + ',' + threeList.id,
											label: threeList.name
										}
										obj2.children.push(obj3)
									})
								}
								obj1.children.push(obj2)
							})
						}
						this.categoryList.push(obj1)
					})
				})
			},
			handleCategoryChange(value) {
				let arr = value[value.length - 1].split(',')
				this.goods.category3Id = arr[arr.length - 1]
			},
			handleCancel: function () {
				this.$store.dispatch('delView', this.$route).then(res => {
					this.$router.push({path: '/goods/list'})
				})
			},
			handleEdit: function () {
				this.$refs['dataForm'].validate(valid => {
					if (valid) {
						this.goods.goodsPicList = []
						this.goodsPicList.forEach(item => {
							if (!item.response) {
								this.goods.goodsPicList.push(item.url)
							} else if (item.response.code == 200) {
								this.goods.goodsPicList.push(item.response.data.photos)
							}
						})
						const finalGoods = {
							...this.goods
						}
						editGoods(finalGoods)
							.then(res => {
								this.$notify.success({
									title: '成功',
									message: '编辑成功'
								})
								this.$store.dispatch('delView', this.$route).then(res => {
									this.$router.push({path: '/goods/list'})
								})
							})
							.catch(res => {
								this.$notify.error({
									title: '失败',
									message: res
								})
							})
					} else {
						this.$notify.error({
							title: '失败',
							message: '请完善表单'
						})
					}
				})
			},
			uploadOverrun: function () {
				this.$message({
					type: 'error',
					message: '上传文件个数超出限制!最多上传5张图片!'
				})
			},
			handleimgsUrl(res, file, fileList) {
				this.goodsPicList = fileList
				console.log(file)
				console.log(fileList)
			},
			handleRemove: function (file, fileList) {
				this.goodsPicList = fileList
				console.log(fileList);
				console.log(this.goodsPicList)
			}
			
		}
	}
</script>
<style lang="scss" scoped>
	.el-card {
		margin-bottom: 10px;
	}
	
	.el-tag + .el-tag {
		margin-left: 10px;
	}
	
	.input-new-keyword {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}
	
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	.avatar-uploader .el-upload:hover {
		border-color: #20a0ff;
	}
	
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px;
		text-align: center;
	}
	
	.avatar {
		width: 145px;
		height: 145px;
		display: block;
	}
</style>
